<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜单管理</title>
    <link rel="stylesheet" href="__ADMIN__/css/amazeui.min.css" />
    <link rel="stylesheet" href="__ADMIN__/css/app.css">
    <link rel="stylesheet" href="__STATIC__/layui/css/layui.css">
    <script src="__COMMON__/jquery.min.js"></script>
</head>
<body>
<div style="background: #e9ecf3" class="theme-white">
    <div class="row-content am-cf">
        <div class="row">
            <div class="am-u-sm-12 am-u-md-12 am-u-lg-12" style="background: white">
                <div class="widget am-cf">
                    <div data-am-widget="titlebar" class="am-titlebar am-titlebar-default">
                        <h2 class="am-titlebar-title">菜单管理</h2>
                    </div>
                    <div class="widget-body  am-fr">

                        <div class="am-u-sm-12 am-u-md-6 am-u-lg-6">
                            <div class="am-form-group">
                                <div class="am-btn-toolbar">
                                    <div class="am-btn-group am-btn-group-xs">
                                        <button type="button" class="am-btn am-btn-default am-btn-success" id="addNode">
                                            <span class="am-icon-plus"></span> 新增顶级菜单
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="am-u-sm-12">
                            <table class="layui-table">
                                <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>节点名称</th>
                                    <th>节点图标</th>
                                    <th>节点路径</th>
                                    <th>是否菜单</th>
                                    <th>添加时间</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                {foreach name="tree" item="vo"}
                                <tr>
                                    <td>{$vo['id']}</td>
                                    <td>{$vo['title']}</td>
                                    <td><i class="{$vo['node_icon']}"></i></td>
                                    <td>{$vo['node_path']}</td>
                                    <td>{if $vo['is_menu'] eq 1}<a class="am-badge am-badge-danger">否</a>{else/}<a class="am-badge am-badge-success">是</a>{/if}</td>
                                    <td>{$vo['add_time']}</td>
                                    <td>
                                        <div class="layui-btn-group">
                                            {if (buttonAuth('node/add'))}
                                            <button type="button" class="layui-btn layui-btn-sm" onclick="addSub(this)" data-parentId="{$vo['id']}" data-name="{$vo['title']}" style="background: rgb(77, 177, 77)">
                                                <i class="layui-icon">&#xe654;</i> 添加子节点
                                            </button>
                                            {/if}
                                            {if (buttonAuth('node/edit'))}
                                            <button type="button" class="layui-btn layui-btn-sm layui-bg-blue" onclick="editNode(this)" data-id="{$vo['id']}" data-parentId="{$vo['parentId']}">
                                                <i class="layui-icon">&#xe642;</i> 编辑节点
                                            </button>
                                            {/if}
                                            {if (buttonAuth('node/delete'))}
                                            <button type="button" class="layui-btn layui-btn-sm layui-bg-red" onclick="delNode(this)" data-id="{$vo['id']}">
                                                <i class="layui-icon">&#xe640;</i> 删除节点
                                            </button>
                                            {/if}
                                        </div>
                                    </td>
                                </tr>
                                {if !empty($vo['children'])}
                                {foreach name="$vo['children']" item="v"}
                                <tr>
                                    <td>{$v['id']}</td>
                                    {if !empty($v['children'])}
                                    <td onclick="showSub(this)" data-flag="0" data-id="{$v['id']}" style="cursor: pointer;">
                                        &nbsp;&nbsp;&nbsp;&nbsp; <i class="layui-icon layui-icon-right"></i> {$v['title']}
                                    </td>
                                    {else/}
                                    <td>&nbsp;&nbsp;&nbsp;&nbsp;|-- {$v['title']}</td>
                                    {/if}
                                    <td>{$v['node_icon']}</td>
                                    <td>{$v['node_path']}</td>
                                    <td>{if $v['is_menu'] eq 1}<a class="am-badge am-badge-danger">否</a>{else/}<a class="am-badge am-badge-success">是</a>{/if}</td>
                                    <td>{$v['add_time']}</td>
                                    <td>
                                        <div class="layui-btn-group">
                                            {if (buttonAuth('node/add'))}
                                            <button type="button" class="layui-btn layui-btn-sm" onclick="addSub(this)" data-parentId="{$v['id']}" data-name="{$v['title']}" style="background: rgb(77, 177, 77)">
                                                <i class="layui-icon">&#xe654;</i> 添加子节点
                                            </button>
                                            {/if}
                                            {if (buttonAuth('node/edit'))}
                                            <button type="button" class="layui-btn layui-btn-sm layui-bg-blue" onclick="editNode(this)" data-id="{$v['id']}" data-parentId="{$v['parentId']}">
                                                <i class="layui-icon">&#xe642;</i> 编辑节点
                                            </button>
                                            {/if}
                                            {if (buttonAuth('node/delete'))}
                                            <button type="button" class="layui-btn layui-btn-sm layui-bg-red" onclick="delNode(this)" data-id="{$v['id']}">
                                                <i class="layui-icon">&#xe640;</i> 删除节点
                                            </button>
                                            {/if}
                                        </div>
                                    </td>
                                </tr>
                                {if !empty($v['children'])}
                                {foreach name="$v['children']" item="vl"}
                                <tr style="display: none" class="tree-{$vl['parentId']}">
                                    <td>{$vl['id']}</td>
                                    <td> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  {if !empty($vl['children'])}<i class="layui-icon layui-icon-right"></i>{/if} {$vl['title']}</td>
                                    <td>{$vl['node_icon']}</td>
                                    <td>{$vl['node_path']}</td>
                                    <td>{if $vl['is_menu'] eq 1}<a class="am-badge am-badge-danger">否</a>{else/}<a class="am-badge am-badge-success">是</a>{/if}</td>
                                    <td>{$vl['add_time']}</td>
                                    <td>
                                        <div class="layui-btn-group">
                                            {if (buttonAuth('node/edit'))}
                                            <button type="button" class="layui-btn layui-btn-sm layui-bg-blue" onclick="editNode(this)" data-id="{$vl['id']}" data-parentId="{$vl['parentId']}">
                                                <i class="layui-icon">&#xe642;</i> 编辑节点
                                            </button>
                                            {/if}
                                            {if (buttonAuth('node/delete'))}
                                            <button type="button" class="layui-btn layui-btn-sm layui-bg-red" onclick="delNode(this)" data-id="{$vl['id']}">
                                                <i class="layui-icon">&#xe640;</i> 删除节点
                                            </button>
                                            {/if}
                                        </div>
                                    </td>
                                </tr>
                                {/foreach}
                                {/if}
                                {/foreach}
                                {/if}
                                {/foreach}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="__ADMIN__/js/amazeui.min.js"></script>
<script src="__STATIC__/layui/layui.js"></script>
<script>
    var layer = null;

    layui.use('layer', function () {
        layer = layui.layer;
    });

    function renderTable() {
        window.location.reload();
    }

    $(function () {

        $("#addNode").click(function () {

            layer.open({
                type: 2,
                title: '添加子节点',
                maxmin: true,
                shade: 0.2,
                area: ['50%', '70%'],
                content: '{:url("node/add", ["pid" => 0, "pname" => "顶级节点"])}'
            });
        });
    });

    function addSub(obj) {

        var pid = $(obj).attr('data-parentId');
        var pname = $(obj).attr('data-name');

        layer.open({
            type: 2,
            title: '添加子节点',
            maxmin: true,
            shade: 0.2,
            area: ['50%', '70%'],
            content: "add/pid/" + pid + '/pname/' + pname
        });
    }

    function editNode(obj) {

        var id = $(obj).attr('data-id');
        var pid = $(obj).attr('data-parentId');

        layer.open({
            type: 2,
            title: '编辑节点',
            maxmin: true,
            shade: 0.2,
            area: ['50%', '70%'],
            content: "edit/pid/" + pid + '/id/' + id
        });
    }

    function delNode(obj) {

        var id = $(obj).attr('data-id');

        layui.use('layer', function () {

            var layer = layui.layer;

            layer.ready(function () {
                var index = layer.confirm('您确定要删除该节点？', {
                    title: '友情提示',
                    icon: 3,
                    btn: ['确定', '取消']
                }, function(){

                    $.getJSON('{:url("node/del")}', {id: id}, function (res) {
                        if (0 == res.code) {
                            layer.msg(res.msg);

                            setTimeout(function () {
                                renderTable();
                            }, 500);
                        } else {

                            layer.alert(res.msg, '', 2);
                        }
                    });

                }, function(){

                });
            });
        });
    }

    function showSub(obj) {

        var flag = $(obj).attr('data-flag');
        if (0 == flag) {
            $(".tree-" + $(obj).attr('data-id')).show();
            $(obj).attr('data-flag', 1);
            $(obj).find('i').removeClass('layui-icon-right').addClass('layui-icon-down');
        } else {
            $(".tree-" + $(obj).attr('data-id')).hide();
            $(obj).attr('data-flag', 0);
            $(obj).find('i').removeClass('layui-icon-down').addClass('layui-icon-right');
        }
    }
</script>
</body>
</html>